﻿@page "/admin/settings/general"
@model Moonglade.Web.Pages.Settings.GeneralModel
@inject ITimeZoneResolver ZoneResolver
@inject IOptions<RequestLocalizationOptions> LocOptions
@inject IMediator Mediator

@{
    var tzList = ZoneResolver.ListTimeZones().Select(t => new SelectListItem
            {
                Text = t.DisplayName,
                Value = t.Id
            });

    var themes = await Mediator.Send(new GetAllThemeSegmentQuery());
    var tmList = themes
        .Select(t => new SelectListItem
                {
                    Text = t.Name,
                    Value = t.Id.ToString()
                });


    var cultureItems = LocOptions.Value.SupportedUICultures
        .Select(c => new { Value = c.Name, c.NativeName });

    var langList = cultureItems
        .Select(t => new SelectListItem
                {
                    Text = t.NativeName,
                    Value = t.Value.ToLower()
                });
}

@section scripts{
    <script src="~/js/app/imageuploader.js"></script>
    <script src="~/js/3rd/bs-custom-file-input.min.js"></script>
    <script type="module">
        import * as settings from '/js/app/admin.settings.module.js';

        var avatarUploader = new ImageUploader('avatar', 300, 'image/jpeg');
        avatarUploader.bindEvents();

        var siteiconUploader = new ImageUploader('siteicon', 512, 'image/png');
        siteiconUploader.bindEvents();

        bsCustomFileInput.init();
        $("#btn-upload-avatar").click(function () {
            avatarUploader.uploadImage('/avatar');
        });
        $("#btn-upload-siteicon").click(function () {
            siteiconUploader.uploadImage('/siteicon');
        });

        var themeModal = new bootstrap.Modal(document.getElementById('thememodal'));

        window.createTheme = function (oFormElement) {
            callApi(oFormElement.action,
                'POST',
                {
                    name: document.querySelector('#Name').value,
                    accentColor1: document.querySelector('#AccentColor1').value,
                    accentColor2: document.querySelector('#AccentColor2').value,
                    accentColor3: document.querySelector('#AccentColor3').value
                },
                async (resp) => {
                    var id = await resp.json();

                    themeModal.hide();
                    $("#ViewModel_SelectedThemeId").append(new Option(document.querySelector('#Name').value, id));
                    blogToast.success('Theme created, refresh to see.');
                });
        }

        window.deleteTheme = function () {
            var selectedThemeId = document.querySelector('#ViewModel_ThemeId').value;
            callApi(`/api/theme/${selectedThemeId}`,
                'DELETE',
                {},
                (resp) => {
                    $(`#ViewModel_SelectedThemeId option[value='${selectedThemeId}']`).remove();
                    blogToast.success('Theme deleted.');
                });
        }

        const form = document.querySelector('#form-settings');
        form.addEventListener('submit', settings.handleSettingsSubmit);
    </script>
}

@section admintoolbar{
    <partial name="_SettingsHeader" />
}

<form id="form-settings" asp-controller="Settings" asp-action="General" spellcheck="false">
    <div class="admin-settings-entry-container">
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <h4 class="admin-subtitle fw-bold mb-2">@SharedLocalizer["Blog Identity"]</h4>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-card-heading settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="ViewModel.SiteTitle"></label>
                        </div>
                        <div class="col-md-5 text-end">
                            <input asp-for="ViewModel.SiteTitle" class="form-control" required />
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-input-cursor settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="ViewModel.LogoText"></label>
                        </div>
                        <div class="col-md-5 text-end">
                            <input asp-for="ViewModel.LogoText" class="form-control" required />
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-file-word settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="ViewModel.MetaKeyword"></label>
                        </div>
                        <div class="col-md-5 text-end">
                            <input asp-for="ViewModel.MetaKeyword" class="form-control" required />
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-app-indicator settings-entry-icon"></i>
                        </div>

                        <div class="col">
                            <label>Favicon</label>
                        </div>

                        <div class="col-md-5 text-end">
                            <img src="@Url.Action("SiteIconOrigin", "Assets")" class="blogadmin-siteicon" />
                            <a class="btn btn-sm btn-outline-accent" href="#" data-bs-toggle="modal" data-bs-target="#siteiconmodal">@SharedLocalizer["Change"]</a>
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-link settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="ViewModel.CanonicalPrefix"></label>
                            <div class="form-text">@SharedLocalizer["Set a primary domain if your website binds to multiple domian names."]</div>
                        </div>
                        <div class="col-md-5 text-end">
                            <input asp-for="ViewModel.CanonicalPrefix" class="form-control" />
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-clock settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label for="SelectedUtcOffset">@SharedLocalizer["Time Zone"]</label>
                            <div class="form-text">@SharedLocalizer["Blog posts will use this time zone as date and time display."]</div>
                        </div>
                        <div class="col-md-5 text-end">
                            <select class="form-select" asp-for="ViewModel.TimeZoneId" asp-items="@tzList"></select>
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-globe settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label for="DefaultLanguageCode">@SharedLocalizer["Default language"]</label>
                            <div class="form-text">@SharedLocalizer["Blog will use this language for SEO by default unless specified in blog post."]</div>
                        </div>
                        <div class="col-md-5 text-end">
                            <select class="form-select" asp-for="ViewModel.DefaultLanguageCode" asp-items="@langList"></select>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <h4 class="admin-subtitle fw-bold mb-2">
                        @SharedLocalizer["Theme"]
                    </h4>
                    <div>
                        <div class="row g-1 mb-2">
                            <div class="col">
                                <select class="form-select" asp-for="ViewModel.ThemeId" asp-items="@tmList"></select>
                            </div>
                            <div class="col-auto">
                                <a class="btn btn-outline-accent" href="#" data-bs-toggle="modal" data-bs-target="#thememodal">
                                    <i class="bi-palette"></i>
                                    New
                                </a>
                                <a class="btn btn-outline-danger btn-delete-theme" href="javascript:deleteTheme();">
                                    <i class="bi-trash"></i>
                                </a>
                            </div>
                        </div>

                        <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                            <div class="col-auto">
                                <i class="bi-moon settings-entry-icon"></i>
                            </div>
                            <div class="col">
                                <label asp-for="ViewModel.AutoDarkLightTheme" class="form-check-label"></label>
                            </div>
                            <div class="col-md-5 text-end">
                                <div class="form-check form-switch form-control-lg">
                                    <input type="hidden" name="AutoDarkLightTheme" value="false">
                                    <input type="checkbox" name="AutoDarkLightTheme" value="true" class="form-check-input" @(Model.ViewModel.AutoDarkLightTheme ? "checked" : null)>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h4 class="admin-subtitle fw-bold mb-2">
                        @SharedLocalizer["Footer"]
                    </h4>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-check2-square settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="ViewModel.Copyright"></label>
                            <div class="form-text">@Html.Raw(@SharedLocalizer["Use [c] for copyright mark: &copy;, [year] for current year."])</div>
                        </div>
                        <div class="col-md-5 text-end">
                            <input asp-for="ViewModel.Copyright" class="form-control" required />
                        </div>
                    </div>

                    <div class="form-floating">
                        <textarea asp-for="ViewModel.FooterCustomizedHtmlPitch"
                                  placeholder="@Html.DisplayNameFor(m => m.ViewModel.FooterCustomizedHtmlPitch)"
                                  class="form-control form-control-sm h-100px textarea-code"
                                  spellcheck="false" rows="10" cols="10"></textarea>
                        <label class="form-label" asp-for="ViewModel.FooterCustomizedHtmlPitch"></label>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="mb-3">
                    <h4 class="admin-subtitle fw-bold mb-2">
                        @SharedLocalizer["Side Bar"]
                    </h4>
                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-layout-sidebar-inset settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="ViewModel.SideBarOption" class="me-4"></label>
                        </div>

                        <div class="col-md-5 text-end">
                            <div class="form-check form-check-inline">
                                @Html.RadioButtonFor(model => model.ViewModel.SideBarOption, SideBarOption.Right, new { id = SideBarOption.Right.ToString(), @class = "form-check-input" })
                                <label class="form-check-label" for="@SideBarOption.Right">@SharedLocalizer["Right"]</label>
                            </div>
                            <div class="form-check form-check-inline">
                                @Html.RadioButtonFor(model => model.ViewModel.SideBarOption, SideBarOption.Left, new { id = SideBarOption.Left.ToString(), @class = "form-check-input" })
                                <label class="form-check-label" for="@SideBarOption.Left">@SharedLocalizer["Left"]</label>
                            </div>
                            <div class="form-check form-check-inline">
                                @Html.RadioButtonFor(model => model.ViewModel.SideBarOption, SideBarOption.Disabled, new { id = SideBarOption.Disabled.ToString(), @class = "form-check-input" })
                                <label class="form-check-label" for="@SideBarOption.Disabled">@SharedLocalizer["Disabled"]</label>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-3 shadow-sm border bg-white mb-2">
                        <div class="settings-entry2 row align-items-center py-3 px-2">
                            <div class="col-auto">
                                <i class="bi-file-person settings-entry-icon"></i>
                            </div>
                            <div class="col">
                                <label asp-for="ViewModel.WidgetsProfile" class="form-check-label"></label>
                            </div>
                            <div class="col-md-5 text-end">
                                <div class="form-check form-switch form-control-lg">
                                    <input type="hidden" name="WidgetsProfile" value="false">
                                    <input type="checkbox" name="WidgetsProfile" value="true" class="form-check-input" @(Model.ViewModel.WidgetsProfile ? "checked" : null)>
                                </div>
                            </div>
                        </div>

                        <div class="border-top py-3 px-2">
                            <div class="row">
                                <div class="col-md-2 col-sm-4">
                                    <div class="mb-3">
                                        <img src="@BlogConfig.GeneralSettings.AvatarUrl" class="img-thumbnail img-fluid blogadmin-avatar" />
                                    </div>
                                    <a class="btn w-100 btn-sm btn-outline-accent" href="#" data-bs-toggle="modal" data-bs-target="#avatarmodal">@SharedLocalizer["Change"]</a>
                                </div>
                                <div class="col-md-10 col-sm-8">
                                    <div class="row mb-2">
                                        <div class="col">
                                            <label class="form-label" asp-for="ViewModel.OwnerName"></label>
                                            <input asp-for="ViewModel.OwnerName" class="form-control" required />
                                        </div>
                                        <div class="col">
                                            <label class="form-label" asp-for="ViewModel.OwnerEmail"></label>
                                            <input asp-for="ViewModel.OwnerEmail" class="form-control" required title="@SharedLocalizer["Email address to receive notifications from this blog."]" />
                                        </div>
                                    </div>

                                    <div class="form-floating">
                                        <input asp-for="ViewModel.Description"
                                               placeholder="@Html.DisplayNameFor(m => m.ViewModel.Description)"
                                               class="form-control" required></input>
                                        <label class="form-label" asp-for="ViewModel.Description"></label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="border-top py-3 px-2">
                            <div class="form-floating">
                                <textarea asp-for="ViewModel.SideBarCustomizedHtmlPitch"
                                          placeholder="@Html.DisplayNameFor(m => m.ViewModel.SideBarCustomizedHtmlPitch)"
                                          class="form-control form-control-sm h-100px textarea-code"
                                          spellcheck="false"
                                          cols="10"
                                          rows="10"></textarea>
                                <label class="form-label" asp-for="ViewModel.SideBarCustomizedHtmlPitch"></label>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-3 shadow-sm border bg-white mb-2">
                        <div class="settings-entry2 row align-items-center py-3 px-2">
                            <label>Side bar items</label>
                            <div class="text-muted">Show or hide widgets that display on the side bar</div>
                        </div>

                        <div class="border-top settings-entry2 row align-items-center py-3 px-2">
                            <div class="col-auto">
                                <i class="bi-tags settings-entry-icon"></i>
                            </div>
                            <div class="col">
                                <label asp-for="ViewModel.WidgetsTags" class="form-check-label"></label>
                            </div>
                            <div class="col-md-5 text-end">
                                <div class="form-check form-switch form-control-lg">
                                    <input type="hidden" name="WidgetsTags" value="false">
                                    <input type="checkbox" name="WidgetsTags" value="true" class="form-check-input" @(Model.ViewModel.WidgetsTags ? "checked" : null)>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-top settings-entry2 row align-items-center py-3 px-2">
                            <div class="col-auto">
                                <i class="bi-8-circle settings-entry-icon"></i>
                            </div>
                            <div class="col">
                                <label asp-for="ViewModel.HotTagAmount"></label>
                            </div>
                            <div class="col-4">
                                <input asp-for="ViewModel.HotTagAmount" class="form-control" min="1" max="32" />
                            </div>
                        </div>

                        <div class="border-top settings-entry2 row align-items-center py-3 px-2">
                            <div class="col-auto">
                                <i class="bi-folder2 settings-entry-icon"></i>
                            </div>
                            <div class="col">
                                <label asp-for="ViewModel.WidgetsCategoryList" class="form-check-label"></label>
                            </div>
                            <div class="col-md-5 text-end">
                                <div class="form-check form-switch form-control-lg">
                                    <input type="hidden" name="WidgetsCategoryList" value="false">
                                    <input type="checkbox" name="WidgetsCategoryList" value="true" class="form-check-input" @(Model.ViewModel.WidgetsCategoryList ? "checked" : null)>
                                </div>
                            </div>
                        </div>

                        <div class="border-top settings-entry2 row align-items-center py-3 px-2">
                            <div class="col-auto">
                                <i class="bi-link-45deg settings-entry-icon"></i>
                            </div>
                            <div class="col">
                                <label asp-for="ViewModel.WidgetsFriendLink" class="form-check-label"></label>
                            </div>
                            <div class="col-md-5 text-end">
                                <div class="form-check form-switch form-control-lg">
                                    <input type="hidden" name="WidgetsFriendLink" value="false">
                                    <input type="checkbox" name="WidgetsFriendLink" value="true" class="form-check-input" @(Model.ViewModel.WidgetsFriendLink ? "checked" : null)>
                                </div>
                            </div>
                        </div>

                        <div class="border-top settings-entry2 row align-items-center py-3 px-2">
                            <div class="col-auto">
                                <i class="bi-menu-button settings-entry-icon"></i>
                            </div>
                            <div class="col">
                                <label asp-for="ViewModel.WidgetsSubscriptionButtons" class="form-check-label"></label>
                            </div>
                            <div class="col-md-5 text-end">
                                <div class="form-check form-switch form-control-lg">
                                    <input type="hidden" name="WidgetsSubscriptionButtons" value="false">
                                    <input type="checkbox" name="WidgetsSubscriptionButtons" value="true" class="form-check-input" @(Model.ViewModel.WidgetsSubscriptionButtons ? "checked" : null)>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="admin-subtitle fw-bold mb-2">
                        @SharedLocalizer["Dublin Core Metadata"]
                    </h4>
                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi bi-globe settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@BlogConfig.GeneralSettings.UseDublinCoreMetaData" class="form-check-label"></label>
                        </div>
                        <div class="col-md-5 text-end">
                            <div class="form-check form-switch form-control-lg">
                                <input type="hidden" name="UseDublinCoreMetaData" value="false">
                                <input type="checkbox" name="UseDublinCoreMetaData" value="true" class="form-check-input" @(BlogConfig.GeneralSettings.UseDublinCoreMetaData ? "checked" : null)>
                            </div>
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-link settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@BlogConfig.GeneralSettings.DcLicenseUrl"></label>
                        </div>
                        <div class="col-md-5 text-end">
                            <input asp-for="@BlogConfig.GeneralSettings.DcLicenseUrl" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="admin-settings-action-container border-top pt-2 mt-2">
        <input id="btn-save-settings" type="submit" value="@SharedLocalizer["Save"]" class="btn btn-outline-accent" />
    </div>
</form>

<partial name="_AvatarModal" />
<partial name="_FaviconModal" />
<partial name="_ThemeModal" model="Model.ThemeRequest" />